<template>
   <div class="blog-list-container" ref="container" v-loading="isLoading">
      <div class="blog-list">
        <div class="blog-item" v-for="item in record.rows" :key="item.id">
          <div class="thumb" v-if="item.thumb">
            <router-link :to="{
              name:'detail',
              params: {
                id: item.id
              }
            }">
              <img
                v-lazy="item.thumb"
                :src="item.thumb"
                :alt="item.title"
                :title="item.title"
              />
            </router-link>
          </div>
          <div class="main">
            <router-link :to="{
              name:'detail',
              params: {
                id: item.id
              }
            }">
              <h2>{{item.title}}</h2>
            </router-link>
            <div class="aside">
              <span>日期：{{formatDate(item.createDate)}}</span>
              <span>浏览：{{item.scanNumber}}</span>
              <span>评论：{{item.commentNumber}}</span>
              <router-link :to="{
              name:'/Home/cate',
              params: {
                categoryId: item.category.id
              }
              }" class="">{{item.category.name}}</router-link>
            </div>
            <div class="desc">
              {{item.description}}
            </div>
          </div>
        </div>
      </div>
      <!-- 分页放到这里 -->
     <Empty v-if="record.rows.length === 0 && isLoading"/>
      <Pager
        v-if="record.total"
        :current="routeInfo.page"
        :total="record.total"
        :limit="routeInfo.limit"
        :visibleNumber="10"
        @pageChange="handlePageChange"
      />
    </div>
</template>

<script>
import Pager from '../../../../components/Pager'
import fetchData from '../../../../mixins/fetchData'
import { getBlogs } from '../../../../api/index'
import { formatDate } from '../../../../utils/'
import mainScroll from '../../../../mixins/mainScroll'
import Empty from '../../../../components/Empty'
export default {
  mixins: [fetchData({ total: 0, rows: [] }), mainScroll('container')],
  name: 'index',
  components: {
    Pager,
    Empty
  },
  data () {
    return {
    }
  },
  computed: {
    routeInfo () {
      const categoryId = +this.$route.params.categoryId || -1
      const page = +this.$route.query.page || 1
      const limit = +this.$route.query.limit || 10
      return {
        categoryId,
        page,
        limit
      }
    }
  },
  watch: {
    async $route () {
      this.isLoading = false
      // 滚动高度，防止loading效果错误
      this.$refs.container.scrollTop = 0
      this.record = await this.fetchData()
      this.isLoading = true
    }
  },
  methods: {
    formatDate,
    fetchData () {
      return getBlogs(this.routeInfo)
    },
    handlePageChange (newPage) {
      // 翻页
      const query = {
        page: newPage,
        limit: this.routeInfo.limit
      }
      if (this.routeInfo.categoryId === -1) {
        this.$router.push({
          path: '/Home/Blog',
          query
        })
        return
      }
      this.$router.push({
        path: '/Home/Blog',
        query,
        params: {
          categoryId: this.routeInfo.categoryId
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
  @import "~@/styles/var.less";
  .blog-list-container {
    line-height: 1.7;
    position: relative;
    padding: 20px;
    overflow-y: auto;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    scroll-behavior: smooth;
    /*去掉滚动条*/
    &::-webkit-scrollbar {
      display: none; /* Chrome Safari */
    }
    &{
      scrollbar-width: none; /* firefox */
      -ms-overflow-style: none; /* IE 10+ */
      overflow-x: hidden;
      overflow-y: auto;
    }
  .blog-list {
    margin: 0;
    padding: 0;
    overflow: auto;
  }
  }
  .blog-item {
    display: flex;
    padding: 15px 0;
    border-bottom: 1px solid @gray;
  .thumb {
    flex: 0 0 auto;
    margin-right: 15px;
  img {
    display: block;
    max-width: 200px;
    border-radius: 5px;
  }
  }
  .main {
    flex: 1 1 auto;
  h2 {
    margin: 0;
  }
  }
  .aside {
    font-size: 12px;
    color: @gray;
  span {
    margin-right: 15px;
  }
  }
  .desc {
    margin: 15px 0;
    font-size: 14px;
  }
  }
</style>
